Свойство clientHeight
Пример
Получить высоту и ширину элемента <div>, включая отступы:
var elmnt = document.getElementById("myDIV");
var txt = "Высота с отступом: " + elmnt.clientHeight + "px<br>";
txt += "Ширина с отступом: " + elmnt.clientWidth + "px";
Попробуйте сами »
Дополнительные примеры "Попробуй сам" приведены ниже.
Определение и использование
Свойство clientHeight возвращает видимую высоту элемента в пикселях, включая отступы, но не границу, полосу прокрутки или поле.
Причина, по которой указано слово "видимый", заключается в том, что если содержимое элемента выше фактической высоты элемента, это свойство вернет только видимую высоту (см."Ещё примеры").
Примечание: Чтобы понять это свойство, вы должны понимать CSS .
Совет: Это свойство часто используется вместе с clientWidth.
Совет: Используйте свойства offsetHeight и offsetWidth, возвращающие видимую высоту и ширину элемента, включая отступы, границу и полосу прокрутки.
Совет: Чтобы добавить полосы прокрутки к элементу, используйте CSS свойство overflow.
Это свойство доступно только для чтения.
Поддержка браузера
Свойство | |||||
---|---|---|---|---|---|
clientHeight | Да | Да | Да | Да | Да |
Синтаксис
element.clientHeight
Технические детали
Возвращает значение | Число, представляющее видимую высоту элемента в пикселях, включая отступы |
---|
Ещё примеры
Пример
Этот пример демонстрирует разницу между clientHeight/clientWidth и offsetHeight/offsetWidth:
var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Высота с отступом: " + elmnt.clientHeight + "px<br>";
txt += "Высота с отступом и границей: " + elmnt.offsetHeight + "px<br>";
txt += "Ширина с отступом: " + elmnt.clientWidth + "px<br>";
txt += "Ширина с отступом и границей: " + elmnt.offsetWidth + "px";
Попробуйте сами »
Пример
Этот пример демонстрирует разницу между clientHeight/clientWidth и offsetHeight/offsetWidth, когда мы добавляем полосу прокрутки к элементу:
var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Высота с отступом: " + elmnt.clientHeight + "px<br>";
txt += "Высота с отступом, рамкой и полосой прокрутки: " + elmnt.offsetHeight + "px<br>";
txt += "Ширина с отступом: " + elmnt.clientWidth + "px<br>";
txt += "Ширина отступы по ширине, границы и полоса прокрутки: " + elmnt.offsetWidth + "px";
Попробуйте сами »